<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-for="(item,index) in activityList" :key="item.id" :label="item.name" :name="item.id">
      <el-row :gutter="20">
        <el-col
            v-for="(product, proIndex) in item.skProductList"
            :key="product.id"
            :span="6"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                :src="product.image"
                class="image"
            />
            <div style="padding: 14px">
              <el-row>
                <el-col :span="20"><span>{{ product.name }}</span></el-col>
                <el-col :span="4"><span>{{ product.price }}</span></el-col>
              </el-row>
              <div class="bottom">
                <el-button text class="button">秒杀</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import {ref} from 'vue'

const activeName = ref(1)

const activityList = ref([
  {
    id: 1,
    name: '活动1',
    skProductList: [{
      id: 1,
      name: '商品AA',
      price: 10,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    },
      {
        id: 2,
        name: '商品BB',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 3,
        name: '商品CC',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 4,
        name: '商品DD',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      }]
  },
  {
    id: 2,
    name: '活动2',
    skProductList: [{
      id: 1,
      name: '商品AA2',
      price: 10,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    },
      {
        id: 2,
        name: '商品BB2',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 3,
        name: '商品CC2',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 4,
        name: '商品DD2',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      }]
  },
  {
    id: 3,
    name: '活动3',
    skProductList: [{
      id: 1,
      name: '商品AA3',
      price: 10,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    },
      {
        id: 2,
        name: '商品BB3',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 3,
        name: '商品CC3',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 4,
        name: '商品DD3',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      }]
  },
  {
    id: 4,
    name: '活动4',
    skProductList: [{
      id: 1,
      name: '商品AA4',
      price: 10,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    },
      {
        id: 2,
        name: '商品BB4',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 3,
        name: '商品CC4',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 4,
        name: '商品DD4',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      }]
  },
  {
    id: 5,
    name: '活动5',
    skProductList: [{
      id: 1,
      name: '商品AA5',
      price: 10,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    },
      {
        id: 2,
        name: '商品BB5',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 3,
        name: '商品CC5',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 4,
        name: '商品DD5',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      }]
  },
  {
    id: 6,
    name: '活动6',
    skProductList: [{
      id: 1,
      name: '商品AA6',
      price: 10,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    },
      {
        id: 2,
        name: '商品BB6',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 3,
        name: '商品CC6',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 4,
        name: '商品DD6',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      }]
  },
  {
    id: 7,
    name: '活动7',
    skProductList: [{
      id: 1,
      name: '商品AA7',
      price: 10,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    },
      {
        id: 2,
        name: '商品BB7',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 3,
        name: '商品CC7',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      },
      {
        id: 4,
        name: '商品DD7',
        price: 10,
        image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      }]
  }
]);


const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs__item {
  width: 200px;
  padding: 10px 50px;
}


.image {
  width: 100%;
  display: block;
}
</style>
